<template>
	<div class="bg-[#EFEFEF]">
		<div class="container mx-auto space-y-5 py-5">
			<div class="bg-white p-14 gap-5 flex flex-col max-md:p-3">
				<div class="grid grid-cols-3 gap-10 max-md:gap-3 max-md:grid-cols-1">
					<div class="col-span-1 flex flex-col gap-2" style="scroll-snap-type: x mandatory">
						<div class="w-full aspect-square">
							<!-- <img-zoom class="zoomIMg !w-full !h-full"      v-lazy="imgsList" alt="" /> -->

							<video
								v-if="!litpic && row.video"
								:src="row.video"
								class="w-full aspect-square"
								autoplay
								loop
								muted
								:show-play-btn="false"
								:controls="true"
								objectFit="cover"
							></video>

							<div class="" v-else>
								<div class="max-md:hidden" v-if="litpic || row.litpic">
									<pic-zoom :url="litpic ? litpic : row.litpic" :scale="3" class="aspect-square bg-gray-500 w-full"></pic-zoom>
								</div>
								<img v-lazy="litpic ? litpic : row.litpic" alt="" class="aspect-square bg-gray-500 w-full max-md:block hidden" />
							</div>
						</div>
						<div class="flex space-x-2 cursor-pointer select-none">
							<div class="flex items-center" @click="onclick('left')">
								<img src="https://dsfw.oss-cn-shanghai.aliyuncs.com/baolian/202309111121670.png" alt="" style="width: 37px" class="aspect-square" />
							</div>
							<div class="w-full flex gap-2">
								<img
									v-lazy="i.image_url"
									style="width: 60px"
									class="aspect-square bg-gray-500"
									alt=""
									v-for="(i, index) in image_list"
									:key="index"
									@click="(index_index = index), (litpic = i.image_url)"
								/>
							</div>
							<div class="flex items-center" @click="onclick('right')">
								<img src="https://dsfw.oss-cn-shanghai.aliyuncs.com/baolian/202309111122129.png" alt="" style="width: 37px" class="aspect-square" />
							</div>
						</div>
					</div>
					<div class="col-span-2 flex flex-col gap-5 text-gray-500">
						<div class="flex flex-col gap-2">
							<span class="font-bold text-[#C1A879] text-base">{{ row.title }}</span>
							<!-- <span> {{ row.seo_description }}</span> -->
						</div>
						<!-- <span class="w-full border-t"></span> -->

						<div v-for="(i, index) in row.attr_list" class="flex" v-if="row && row.attr_list" :key="index">
							<span v-if="i.attr_name">{{ i.attr_name }}: &nbsp; </span>
							<span v-html="formatText(i.attr_value)" v-if="i.attr_value"></span>
						</div>
						<!-- <span v-if="row && row.attr_list">{{ lg ? "价格：" : "Price：" }}{{ row.attr_list && row.attr_list[0].attr_value }}</span> -->
					</div>
				</div>
				<div class="gap-5 flex flex-col text-gray-500">
					<span class="text-base text-[#C1A879]">{{ lg === 0 ? "Product information" : lg === 1 ? "产品信息" : "產品信息" }}</span>
					<span class="w-full border-t"></span>

					<p v-html="content" v-viewer></p>
				</div>
				<div class="w-full border-t"></div>
				<div class="flex flex-col gap-3 text-[#C1A879] cursor-pointer">
					<div @click="index(1)" class="flex">
						{{ lg === 0 ? "Previous post" : lg === 1 ? "上一篇" : "上一篇" }}: <span class="w-1 block"></span>
						<span v-if="next && next.title">{{ next.title }} </span>
						<span v-else> {{ lg === 0 ? "No article" : lg === 1 ? "暂无文章" : "暫無文章" }}</span>
					</div>
					<div @click="index(2)" class="flex">
						{{ lg === 0 ? "Next chapter" : lg === 1 ? "下一篇" : "下一篇" }}:<span class="w-1 block"></span>

						<span v-if="pre && pre.title">{{ pre.title }} </span>
						<span v-else> {{ lg === 0 ? "No article" : lg === 1 ? "暂无文章" : "暫無文章" }}</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import PicZoom from "vue-piczoom";
export default {
	components: {
		PicZoom
	},
	data() {
		return {
			query: {},
			row: {},
			next: {},
			pre: {},

			litpic: "",
			image_list: [],
			index_index: 0,
			showMagnifier: false,
			bgPosition: "0 0",
			aid: "",
			content: ""
		};
	},
	filters() {},
	created() {
		console.log("this.$route.query==> ", this.$route.query);
		this.query = this.$route.query;
		this.indexdd();
	},
	watch: {
		row(newValue, oldValue) {
			this.image_list = newValue.image_list;
		}
	},
	methods: {
		formatText(text) {
			return text.replace(/\r\n/g, "<br>");
		},
		handleMouseMove(event) {
			const image = this.$refs.image;
			const rect = image.getBoundingClientRect();
			console.log("rect==> ", rect);
			const mouseX = event.clientX - rect.left;
			const mouseY = event.clientY - rect.top;

			const bgPosX = (mouseX / rect.width) * 800 - 100;
			const bgPosY = (mouseY / rect.height) * 800 - 100;

			this.bgPosition = `${bgPosX}% ${bgPosY}%`;
			this.showMagnifier = true;
		},
		async onclick(e) {
			console.log("e==> ", e);
			// console.log("this.image_list==> ", this.image_list);
			// console.log("this.indexs==> ", this.index_index);
			if (e == "left") {
				if (this.index_index <= 0) return;
				console.log("66==> ", 66);
				console.log("this.index_index ==> ", this.index_index);

				this.litpic = this.image_list[this.index_index - 1].image_url;
				this.index_index -= 1;
			} else {
				console.log("this.index_index==> ", this.index_index);
				if (this.index_index >= this.image_list.length - 1) return;

				this.litpic = this.image_list[this.index_index + 1].image_url;
				this.index_index += 1;
			}
		},
		async index(e) {
			if (e == 1) {
				if (!this.next) return;
				this.aid = this.next.aid;
			} else {
				if (!this.pre) return;
				this.aid = this.pre.aid;
			}
			this.indexdd();
		},
		async indexdd() {
			let aid = this.aid;
			const [err, res] = await this.$to(this.$axios.get(`&a=article_details&typeid=${this.query.typeid}&aid=${aid || this.query.aid}`));
			if (err) return this.$message.error(err);
			if (res.code == 0) return this.$message.error(res.msg);
			this.row = res.data.row;
			this.content = res.data.row.content.replace("/uploads/", "https://admin.fortunajewellery.net/uploads/").replace(/text-wrap:\s*nowrap;/g, "");

			this.next = res.data.next;
			this.pre = res.data.pre;
		}
	}
};
</script>

<style lang="scss" scoped>
.magnifier {
	position: absolute;
	width: 200px;
	height: 200px;
	border: 2px solid #000;
	cursor: zoom-in;
	display: none;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: 800% 800%;
}

/deep/video {
	@apply aspect-video;
}
</style>
